<template>
	<view class="content">
		<view class="prefer_posi">
			<!-- 筛选区 -->
			<view class="delica_view">
				<view class="delica_list delica_grow" @click="multiple()">
					<text>{{synthesize}}</text>
					<image src="../../../static/coen/paixu.png" mode="widthFix"></image>
				</view>
				<view class="delica_grow" @click="sales()">销量高</view>
				<view class="delica_grow" @click="sales()">速度快</view>
				<view class="delica_grow" @click="sales()">津贴联盟</view>
				<view class="delica_list delica_right" @click="scReen()">
					<text>筛选</text>
					<image src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist sorttitle" v-if="drop">
				<block v-for="(item,index) in sortlist" :key="index">
					<text :class="{activeb:index==num}" @click="sortClick(index,item.name,item.screen,item.nums)">{{item.name}}</text>
				</block>
			</view>
			<!-- 多个筛选区 -->
			<view class="sortlist sortlist_view" v-if="sortmen">
				<!-- 多选 商家特色 -->
				<block v-for="(item,index) in screendata" :key="index">
					<view>
						<view class="sortlist_title">{{item.title}}</view>
						<view class="sortlist_flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice" :class="{scractive:itemdata.id===2}" @click="screenchoice(indexs,itemdata.sign)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 单选 人均价 -->
				<block v-for="(item,index) in person" :key="index">
					<view>
						<view class="sortlist_title">{{item.title}}</view>
						<view class="sortlist_flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice" :class="{scractive:indexs==srcnum}" @click="personchoice(indexs,itemdata.per)">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 置顶-->
				<view class="sortlist_bottom">
					<text @click="empty()">清空</text>
					<text @click="flag && complete()">完成</text>
				</view>
				
			</view>		
		</view>
		
		<!-- 透明背景-->
		<view class="yin" v-if="ying" @click="backClic()"></view>	
	</view>
	
	
</template>

<script>
	// 引入post请求
	import{publicing} from '../../../api/api.js'
	// 引入请求地址
	import{startingurl,multipleurl} from '../../../api/request.js'
	export default{
		data(){
			return{
				synthesize:"综合排序",
				drop:false,
				sortmen:false,
				ying:false,
				num:0,
				srcnum:-1,
				//接收筛选的对象
				multiobj:{},
				flag:false,
				sortlist:[
					{
						"name":'综合排序',
						"screen":'_id',
						"nums":1
					},
					{
						"name":'起送价最低',
						"screen":'delivering',
						"nums":1
					},
					{
						"name":'配送费最低',
						"screen":'physical',
						"nums":1
					},
					{
						"name":'人均高到低',
						"screen":'capita',
						"nums":-1
					},
					{
						"name":'人均低到高',
						"screen":'capita',
						"nums":1
					}
				],
				screendata:[
					{
						"title":"商家特色(可多选)",
						"datas":[
							{
								"id":1,
								"sign":'duration',
								"name":'配送最快'
							},
							{
								"id":1,
								"sign":'deliver',
								"name":'0元起送'
							},
							{
								"id":1,
								"sign":'physi',
								"name":'免配送费'
							}
						]
					}
				],
				person:[
					{
						"title":'人均价',
						"datas":[
							{
								"name":'20元以下',
								"per":{
									"$lt":20
								}
							},
							{
								"name":'20元-40元',
								"per":{
									"$lte":40,
									"$gte":20
								}
							},
							{
								"name":'40元以上',
								"per":{
									"$gt":40
								}
							}
						]
					}
				],
			}
		},
		methods:{
			//综合排序
			multiple(){
				this.drop=true
				this.sortmen=false
				this.backOne()
			},
			//综合排序替换
			sortClick(index,name,screen,nums){
				this.synthesize=name
				this.num=index
				this.backClic()
				console.log(screen+nums)
				this.starTing(screen,nums)
			},
			// 综合排序的请求
			starTing(screen,nums){
				let Data={
					screen,
					nums
				}
				publicing(startingurl,Data)
				.then((res)=>{
					console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			//销量、速度、津贴
			sales(){
				this.backClic()
			},
			//筛选
			scReen(){
				this.drop=false
				this.sortmen=true
				this.backOne()
			},
			//透明背景
			backOne(){
				setTimeout(()=>{
					this.ying=true
				},310)
			},
			//隐藏透明背景
			backClic(){
				this.ying=false
				this.drop=false
				this.sortmen=false
			},
			// 商家特色 多选
			screenchoice(indexs,sign){
				//console.log(sign)
				if(this.screendata[0].datas[indexs].id==1){
					//选中
					this.screendata[0].datas[indexs].id=2
					//this.$set给对象添加属性
					this.$set(this.multiobj,sign,sign)					
					//console.log(this.multiobj)
				}else{
					//未选中
					this.screendata[0].datas[indexs].id=1
					this.$delete(this.multiobj,sign)
					//console.log(this.multiobj)
				}
			},
			// 人均价 单选
			personchoice(indexs,name){
				if(this.srcnum==indexs){
					//未选中
					this.srcnum=-1
					this.$delete(this.multiobj,'capita')
					//console.log(this.multiobj)
				}else{
					//选中
					this.srcnum=indexs
					this.$set(this.multiobj,'capita',name)
					//console.log(this.multiobj)
				} 
			},
			//清空筛选
			empty(){
				// 多选
				this.screendata.forEach((item)=>{
					let arr=item.datas.map((items)=>{
						items.id=1
						return items
					})
					//console.log(arr)
				})
				// 单选
				this.srcnum=-1
				this.backClic()
				this.multiobj={}
			},
			// 完成请求
			complete(){
				publicing(multipleurl,multiobj)
				.then((res)=>{
					console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data)
				})
				.catch((err)=>{
					console.log(err)
				})
				this.backClic()
			},
			
		},
		computed:{
			//如果用户没有点击任何筛选条件，完成按钮应该被禁用
			// this.multiobj如果是空对象，禁止点击完成按钮
			emp(){
				let obj=JSON.stringify(this.multiobj)=='{}'
				//console.log(obj) // true 表示空对象 
				if(obj==true){
					this.flag=false
				}else{
					this.flag=true
				}
			}
		}
	}
</script>

<style scoped>
	.content{
		height: 100%;
	}
	/*筛选区*/
	.delica_view image{
		width: 30upx;
		height: 30upx;
		display: block;
	}
	.delica_view{
		font-size: 28upx;
		display: flex;
		align-items: center;
		color: #666666;
		height: 70upx;
		padding: 0 15upx;
		background: #FFFFFF;
	}
	.delica_list{
		display: flex;
		align-items: center;
	}
	.delica_right{
		justify-content: flex-end;
		flex-grow: 5;
	}
	.delica_grow{
		flex-grow: 1;
	}
	.prefer_posi{
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}
	/* 排序 */
	.sortlist{		
		background: #FFFFFF;
	}
	/* .sorttitle{
		position: fixed;
		top: 0;
		width: 100%;
	} */
	.sorttitle text{
		padding: 0 15upx;
		display: block;
		font-size: 30upx;
		height: 70upx;
		line-height: 70upx;
		border-top: 1upx solid #ededed;		
	}
	.activeb{
		color: #f89903 !important;
	}
	/* 筛选 */
	.sortlist_view{
		height: 700upx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
	}
	.sortlist_title{
		padding: 0 15upx;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
	}
	.choice{
		font-size: 28upx;
		background: #f8f8f8;
		height: 55upx;
		line-height: 55upx;
		color: #666666;
		width: calc((100%/3)-0px) !important;
		margin: 7.5px;
		text-align: center;
		display: block;
		border-radius: 5upx;
	}
	.sortlist_flex{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30upx;
	}
	.sortlist_bottom{
		background: #FFFFFF;
		height: 80upx;
		border-top: 1upx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.sortlist_bottom text{
		flex-grow: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
	.sortlist_bottom text:nth-child(1){
		border-right: 1upx solid #e4e4e4;
	}
	.sortlist_bottom text:nth-child(2){
		background: #ffd348;
	}
	.scractive{
		background: #fef6df !important;
		color: #f29909 !important;
	}
	.yin{
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
